<template>
    <div class="min-h-screen bg-slate-100 dark:bg-gray-900 p-4 md:p-6">
        <!-- 主卡片容器 -->
        <div
            class="mb-5 max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 relative">
            <!-- 编辑 -->
            <div class="absolute  right-4 top-4 w-6 h-6" @click="editLabelVisible = true">
                <svg t="1756081978060" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4924">
                    <path
                        d="M783.673469 929.959184H177.632653c-45.97551 0-83.591837-37.616327-83.591837-83.591837V240.326531c0-45.97551 37.616327-83.591837 83.591837-83.591837h407.510204c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959H177.632653c-22.987755 0-41.795918 18.808163-41.795918 41.795919v606.040816c0 22.987755 18.808163 41.795918 41.795918 41.795918h606.040816c22.987755 0 41.795918-18.808163 41.795919-41.795918V438.857143c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v407.510204c0 45.97551-37.616327 83.591837-83.591837 83.591837z"
                        fill="#333333" p-id="4925"></path>
                    <path
                        d="M498.938776 563.722449c-9.926531 0-19.330612-4.179592-27.167347-11.493878-11.493878-11.493878-14.628571-28.212245-7.836735-42.840816l31.346939-66.873469c9.926531-21.420408 23.510204-40.75102 39.706122-56.946939l272.718367-272.718367c26.644898-26.644898 72.097959-25.6 100.310205 3.134693 28.734694 28.734694 29.779592 73.665306 3.134693 100.310205l-272.718367 272.718367c-16.718367 16.718367-35.526531 29.779592-56.946939 39.706122l-66.873469 31.346939c-5.22449 2.612245-10.44898 3.657143-15.673469 3.657143zM854.726531 135.836735c-6.791837 0-13.061224 2.612245-17.763266 7.314285L564.244898 415.346939c-13.061224 13.061224-23.510204 28.212245-31.346939 44.930612l-27.167347 57.469388 57.469388-27.167347c16.718367-7.836735 31.869388-18.285714 44.930612-31.346939l272.718368-272.718367c4.702041-4.702041 7.314286-11.493878 6.791836-19.330613-0.522449-8.359184-4.179592-16.195918-9.92653-21.942857-6.269388-6.269388-14.106122-9.926531-21.942857-9.92653-0.522449 0.522449-0.522449 0.522449-1.044898 0.522449z"
                        fill="#333333" p-id="4926"></path>
                    <path
                        d="M621.714286 497.371429c-5.22449 0-10.44898-2.089796-14.628572-6.269388L532.897959 417.436735c-8.359184-8.359184-8.359184-21.420408 0-29.779592 8.359184-8.359184 21.420408-8.359184 29.779592 0l73.665306 73.665306c8.359184 8.359184 8.359184 21.420408 0 29.779592-4.179592 4.179592-9.404082 6.269388-14.628571 6.269388z"
                        fill="#333333" p-id="4927"></path>
                </svg>
            </div>

            
                <!-- 删除图标 -->
                <div class="absolute h-6 w-6 right-14 top-4 delete-icon" @click="deleteArticle(article)">
                    <svg t="1756096348965" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6111" >
                        <path
                            d="M519.620465 0c-103.924093 0-188.511256 82.467721-192.083349 185.820279H85.015814A48.91386 48.91386 0 0 0 36.101953 234.686512a48.91386 48.91386 0 0 0 48.913861 48.866232h54.010046V831.345116c0 102.852465 69.822512 186.844279 155.909954 186.844279h439.200744c86.087442 0 155.909953-83.491721 155.909954-186.844279V284.100465h48.91386a48.91386 48.91386 0 0 0 48.913861-48.890046 48.91386 48.91386 0 0 0-48.913861-48.866233h-227.756651A191.559442 191.559442 0 0 0 519.620465 0z m-107.234232 177.080558c3.548279-49.771163 46.627721-88.540279 99.851907-88.540279 53.224186 0 96.327442 38.745302 99.351813 88.540279h-199.20372z m-111.997024 752.044651c-30.981953 0-65.083535-39.15014-65.083535-95.041488V287.744h575.488v546.839814c0 55.915163-34.077767 95.041488-65.059721 95.041488H300.389209v-0.500093z"
                            fill="#D81E06" p-id="6112"></path>
                        <path
                            d="M368.116093 796.814884c24.361674 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.908465-48.818605-44.27014-48.818604-24.33786 0-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.293954 48.818605z m154.933581 0c24.361674 0 44.293953-21.670698 44.293954-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.293954-48.818604-24.33786 0-44.27014 21.670698-44.270139 48.818604v278.623256c0 27.147907 19.932279 48.818605 44.293953 48.818605z m132.810419 0c24.33786 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.27014-48.818604s-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.27014 48.818605z"
                            fill="#D81E06" p-id="6113"></path>
                    </svg>
                </div>


            <!-- 用户信息区域 -->
            <div class="p-4 md:p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center gap-4">
                    <el-avatar :size="50"
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.xzfpkJdhfQ8AEGsz6fxe2QAAAA?rs=1&pid=ImgDetMain"
                        class="border-4 border-white dark:border-gray-600 shadow-md hover:scale-105 transition-transform duration-300" />
                    <div class="space-y-1">
                        <div
                            class="text-lg font-medium text-gray-800 dark:text-gray-100 hover:text-blue-600 transition-colors cursor-pointer">
                            Cookies
                        </div>
                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            2024-03-20
                        </div>
                    </div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="p-1 md:p-1">
                <div class="prose max-w-none dark:prose-invert min-h-[100px] md:min-h-[100px]">
                    <MdPreview previewTheme="mk-cute" :modelValue="content"
                        class="rounded-lg bg-gray-50 dark:bg-gray-700 p-4 transition-colors duration-300"
                        :theme="themeStatus.isDark ? 'dark' : 'light'" />
                </div>
            </div>

            <!-- 互动按钮区域 -->
            <div class="px-4 md:px-6 py-3 bg-gray-50 dark:bg-gray-700 rounded-b-2xl">
                <div class="flex items-center gap-5 text-gray-600 dark:text-gray-300">
                    <button @click="like()" class="flex items-center gap-2 hover:text-red-500 transition-colors group">


                        <!-- 没有点赞的按钮 -->
                        <svg v-if="!isLike" class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>

                        <!-- 点赞的按钮 -->
                        <svg v-else class="w-5 h-5 group-hover:scale-110 transition-transform" fill="red" stroke="red"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                        <span class="font-medium">248</span>
                    </button>

                    <button @click="dynamicCommentStatus.toggle()"
                        class="flex items-center gap-2 hover:text-blue-500 transition-colors group">
                        <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none"
                            stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                        </svg>
                        <span class="font-medium">56</span>
                    </button>
                </div>

            </div>
        </div>
    </div>


    <div class="fixed bottom-8 right-4 z-50">
        <button @click="postLabelVisible = true" class="p-3 w-12 h-12 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center scale-100 
         hover:bg-slate-500 dark:hover:bg-slate-100
            ">
            <svg t="1749358200092" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="6143" width="200" height="200">
                <path
                    d="M190.836364 0h477.090909L930.909091 272.290909v651.636364c0 53.527273-44.218182 97.745455-97.745455 97.745454H190.836364C137.309091 1024 93.090909 979.781818 93.090909 926.254545V97.745455C93.090909 44.218182 137.309091 0 190.836364 0z"
                    fill="#FA944A" p-id="6144"></path>
                <path
                    d="M674.909091 4.654545L935.563636 279.272727h-165.236363C709.818182 279.272727 674.909091 225.745455 674.909091 181.527273V4.654545zM349.090909 558.545455h325.818182c25.6 0 46.545455 20.945455 46.545454 46.545454s-20.945455 46.545455-46.545454 46.545455H349.090909c-25.6 0-46.545455-20.945455-46.545454-46.545455s20.945455-46.545455 46.545454-46.545454z"
                    fill="#FFD7BA" p-id="6145"></path>
                <path
                    d="M465.454545 768V442.181818c0-25.6 20.945455-46.545455 46.545455-46.545454s46.545455 20.945455 46.545455 46.545454v325.818182c0 25.6-20.945455 46.545455-46.545455 46.545455s-46.545455-20.945455-46.545455-46.545455z"
                    fill="#FFD7BA" p-id="6146"></path>
            </svg>
        </button>
    </div>

    <el-dialog v-model="editLabelVisible" title="编辑动态" width="500px" align-center :close-on-click-modal="false">
        <div class="mb-4 flex items-center">
            <span class="pr-4 text-gray-700 dark:text-gray-200">是否置顶：</span>
            <el-switch v-model="isTop" />
        </div>
        <MdEditor v-model="text" :toolbars="toolbars" :preview="false" :theme="themeStatus.isDark ? 'dark' : 'light'"
            style="height: 260px; border-radius: 8px;" @onSave="saveContent" />
        <template #footer>
            <div class="flex justify-end gap-2">
                <el-button @click="editLabelVisible = false">取消</el-button>
                <el-button type="primary" @click="saveContent">保存</el-button>
            </div>
        </template>
    </el-dialog>
    
    <el-dialog v-model="postLabelVisible" title="编辑动态" width="500px" align-center :close-on-click-modal="false">
        <div class="mb-4 flex items-center">
            <span class="pr-4 text-gray-700 dark:text-gray-200">是否置顶：</span>
            <el-switch v-model="isTop" />
        </div>
        <MdEditor v-model="text" :toolbars="toolbars" :preview="false" :theme="themeStatus.isDark ? 'dark' : 'light'"
            style="height: 260px; border-radius: 8px;" @onSave="saveContent" />
        <template #footer>
            <div class="flex justify-end gap-2">
                <el-button @click="editLabelVisible = false">取消</el-button>
                <el-button type="primary" @click="saveContent">保存</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
// preview.css相比style.css少了编辑器那部分样式
import 'md-editor-v3/lib/preview.css';
import { MdPreview } from 'md-editor-v3';
import { ref } from 'vue';
import { systemStatus } from '../../../ts/pinia';
import { MdEditor } from 'md-editor-v3'; //文章编辑
let themeStatus = systemStatus()
let content = ref(`
第一条动态
动态测试内容区域，支持markdown语句动态测试内容区域，支持markdown语句动态测试内容区域，
支持markdown语句
`);
// 点赞的方法
function like() {
    isLike.value = !isLike.value
    console.log("like函数");
}

const editLabelVisible = ref(false)// 控制文章标签编辑对话框的显示和隐藏
const postLabelVisible = ref(false)// 控制发布文章对话框的显示和隐藏
const isTop = ref(false) // 控制是否置顶
let text = ref('1233333');
const toolbars = ['italic', 'underline', 'bold', 'sub', 'sup', 'code', 'revoke', '-', '=', 'preview'];





function deleteArticle(article) {
    console.log("删除文章", article);
    let confirmDelete = window.confirm("确定删除这篇动态吗？");
    if (confirmDelete) {
        // 执行删除操作
    }
}


</script>
<style scoped></style>